<script setup lang="ts">
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app';
	import OrderList from './compontents/OrderList.vue'
	import filterPanel from './compontents/filterPanel.vue'
	const orderTabs = ref([
		{ orderState: null, title: '全部' },
		{ orderState: 0, title: '待支付' },
		{ orderState: 2, title: '预订成功' },
	])
	const refresh = ref(false)
	const query = defineProps<{
		type : string
	}>()
	const activeIndex = ref(
		query.type === undefined || query.type === null
			? 0
			: orderTabs.value.findIndex((v) => v.orderState === Number(query.type))
	)
	const popup = ref(null)
	const sharedData = ref('');
	const filterHandle = () => {
		popup?.value.open('bottom')
	}
	const filter = (data : any) => {
		console.log(data)
		sharedData.value=data
		popup?.value.close()
	}
	onShow(() => {
		refresh.value = true
	})
	
</script>

<template>
	<view class="viewport">
		<view class="tabs">
			<text class="item" v-for="(item, index) in orderTabs" :key="item.title"
				@tap="activeIndex = index">{{ item.title }}
			</text>
			<text class="item" @tap="filterHandle">筛选 <text class="icon icon-xiangxiajiantou" /></text>
			<view class="cursor" :style="{ left: activeIndex * 25 + '%' }"></view>
		</view>
		<view style="height: calc(100vh - 40px );">
			<scroll-view scroll-y class="orders">
				<OrderList :orderState="orderTabs[activeIndex].orderState" :receiveData="sharedData" v-model:refresh="refresh"></OrderList>
			</scroll-view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<filterPanel @close="popup?.close()" @filter="filter" />
		</uni-popup>
	</view>
</template>

<style scoped lang="scss">
	page {
		height: 100%;
		overflow: hidden;
	}

	.viewport {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f7f7f7;
	}

	// tabs
	.tabs {
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		margin: 0 10rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
		position: relative;
		z-index: 9;

		.item {
			flex: 1;
			text-align: center;
			padding: 20rpx;
			font-size: 28rpx;
			color: #262626;
		}

		.cursor {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 20%;
			height: 6rpx;
			padding: 0 50rpx;
			background-color: $uni-color-primary;
			/* 过渡效果 */
			transition: all 0.4s;
		}
	}
</style>